<template>

    <a-modal :open="visible" title="查看位置" :destroyOnClose="true" :width="1000" @ok="handleOk" @cancel="handleClose">

       
        <Amap ref="amap" @complete="complete"  style="height: 500px;"></Amap>
    </a-modal>

</template>
<script setup lang="ts">
import { ref, watch} from 'vue'
import Amap from '@/components/Amap/Amap.vue'
import location from '@/assets/map/location.png'

const props = defineProps<{
    visible:boolean,
    data?: {lng:number,lat:number, title:string}
}>()

const emit = defineEmits(['ok', 'close'])
const lnglat = ref()
const amap = ref()

const complete = (map: AMap.Map) => {
    if(!props.data){
        return
    }
    
   

    amap.value.addMarker({
        img: location,
        width: 23,
        height: 31,
        lng: props.data.lng,
        lat: props.data.lat,
        anchor: 'bottom-center'
    })

    amap.value.addText({
        lng: props.data.lng,
        lat: props.data.lat,
        content: props.data.title
    })

    map.panTo([props.data.lng, props.data.lat]);
}

const handleOk = () => {
    emit('ok')
   
    handleClose()

}
const handleClose = () => {
    emit('close')
}
</script>
<style scoped>
.point-div {
    padding: 0 0 30px 0;
}

.point-text {
    color: #1677ff;
}
</style>